<template>
    <view>
        <uni-nav-bar @clickLeft="$tab.back()" fixed="true" color="#fff" left-icon="left" backgroundColor="#FE6B39"
            :title="`${title}转赠`" statusBar="true" :border="false" />

        <view class="px-20 py-32">
            <view class="box_1 px-36 py-32 flex items-center justify-between">
                <view class="flex align-center">
                    <text class="text-28 text-FFF">
                        {{title}}
                        <text class="ml-16 text-36">{{balance}}</text>
                    </text>
                </view>
            </view>
            <view class="text-36 font-700 mt-48">
                转赠数量
            </view>
            <view class="flex items-center mt-40">
                <image
                    src="http://lbst.lubaoshengtai.com/profile/upload/2023/05/08/icon_zhuanhua_20230508112725A937.png"
                    class="image-40" mode="widthFix" />
                <input type="number" :placeholder="`请输入${'转赠'}数量`" v-model="price" class="ml-20">
            </view>
            <view class="mt-32">
                <u-line color="#E5E5E5"></u-line>
            </view>
            <view class="mt-12 text-24 text-9E9E9E">
                转账手续费扣除{{sendRateStr}}手续费
            </view>
        </view>
        <view class="box_3">

        </view>
        <view class="px-20">
            <view class="flex">
                <view class="box_4" v-for="(item,index) in conversionArr" :key="index" :style="{
						background:index==conversionIndex?'#FE6B39' :'#EEEEEE',
						color:index == conversionIndex ? '#fff':'#666'
				}" @click="conversionIndex = index">
                    {{item.toMoneyName}}
                </view>
            </view>
            <view class="">
                <view class="flex align-center justify-between pt-32">
                    <view class="text-36 font-700">
                        转赠账户
                    </view>
                </view>
                <input type="number" class="input_1" placeholder="请输入转赠用户手机号" v-model="otherUser">
            </view>
        </view>
        <view class="confirm" @click="getshow()">
            确认转赠
        </view>
        <u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
            <view style="width:90vw;padding: 48rpx;">
                <view class="pay_title">
                    <text>请输入支付密码</text>
                </view>
                <view class="flex mt-32">
                    <u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
                </view>
                <view class="" style="width: 100%;height: 50rpx;"></view>
                <u-button text="确认" @click="confirm"
                    style="background-color: #FE6B39;color: #fff;border-radius: 20rpx;"></u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        throttle
    } from 'throttle-debounce';
    var thro;
    export default {
        data() {
            return {
                otherUser: '',
                mineMoney: null, //拥有的余额
                price: null, //转化转赠金额双向绑定
                index: 0, //0为转化1为转赠
                conversionArr: [], //可转化 数组
                moneyName: "", //当前货币名称
                conversionIndex: 0, //转化后货币index
                detail: null,
                balance: 0,
                pay_password: false,
                payPassword: '',
                currencyId: '', //货币id
                title: "",
                sendRateStr:""
            };
        },
        onLoad(e) {
            thro = this
            this.currencyId = e.currencyId
            this.title = e.title
            this.balance = e.alway
            this.getData()
        },
        methods: {
            async getData(){
                const userRichInfo = await this.$Api.user.userRichInfo()
                let arr = userRichInfo.data.filter(item=>{
                    return item.moneyId == this.currencyId
                })
                console.log(arr)
                this.sendRateStr = arr[0].moneyConfig
.sendRateStr
            },
            getshow() {
                if (!this.price || !this.otherUser) {
                    uni.$u.toast('请输入转赠数量和手机号');
                    return false
                }
                if (this.price && this.price <= 0) {
                    uni.$u.toast('请输入正确的转赠数量');
                    return false
                }
                if (!uni.$u.test.mobile(this.otherUser)) {
                    uni.$u.toast('请输入正确的手机号');
                    return false
                }
                this.pay_password = true
            },
            //转赠
            confirm: throttle(2000, (code) => {
                if (!thro.payPassword || thro.payPassword.length < 6) {
                    uni.$u.toast('请输入支付密码')
                    return false
                }
                thro.$Api.currency.moneySend({
                    userName: thro.otherUser,
                    moneyTypeId: thro.currencyId,
                    amount: thro.price,
                    payPassword: thro.payPassword
                }).then(res => {
                    console.log(res, 'res')
                    thro.pay_password = false
                    thro.payPassword = ''
                    thro.$modal.msg(res.msg)
                    setTimeout(() => {
                        thro.$tab.back()
                    }, 1500)
                })
            },{
				noTrailing:true
			})
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .box_1 {
        background: #FE6B39;
        border-radius: 8rpx;
    }

    .box_2 {
        width: 136rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 4rpx;
        text-align: center;
        line-height: 48rpx;
        color: #FE6B39;
        font-size: 28rpx;
    }

    .box_3 {
        background-color: #F8F8F8;
        height: 32rpx;
    }

    .box_4 {
        padding: 12rpx 28rpx;
        margin-right: 40rpx;
    }

    .confirm {
        width: 678rpx;
        height: 88rpx;
        background: #FE6B39;
        border-radius: 8rpx;
        position: fixed;
        left: 32rpx;
        bottom: 48rpx;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 28rpx;
    }

    .input_1 {
        height: 80rpx;
        background: #F8F8F8;
        border-radius: 8rpx;
        border: 2rpx solid #E3E3E3;
        padding: 0 16rpx;
        margin-top: 16rpx;
    }
</style>